<template>
  <a-card
    class="general-card"
    :bordered="false"
  >
    <Chart height="122px" :option="domainChartOption" />
  </a-card>
</template>

<script lang="ts" setup>
import { defineProps } from 'vue';
import useChartOption from '../../hooks/chart-option';

const props = defineProps({
  aptPredictions: {
    type: Array,
    default: () => []
  }
});

// 提取 APT 组织名称和概率
const aptNames = props.aptPredictions.map(apt => apt.apt);
const probabilities = props.aptPredictions.map(apt => apt.probability);

// 域名使用量图表配置
const { chartOption: domainChartOption } = useChartOption((isDark) => {
  return {
    grid: {
      left: 44,
      right: 20,
      top: 0,
      bottom: 20,
    },
    xAxis: {
      type: 'value',
      axisLabel: {
        show: true,
        formatter(value: number, idx: number) {
          if (idx === 0) return String(value);
          return `${Number(value)}`;
        },
      },
      splitLine: {
        lineStyle: {
          color: isDark ? '#484849' : '#E5E8EF',
        },
      },
    },
    yAxis: {
      type: 'category',
      data: aptNames,
      axisLabel: {
        show: true,
        color: '#4E5969',
      },
      axisTick: {
        show: true,
        length: 2,
        lineStyle: {
          color: '#A9AEB8',
        },
        alignWithLabel: true,
      },
      axisLine: {
        lineStyle: {
          color: isDark ? '#484849' : '#A9AEB8',
        },
      },
    },
    tooltip: {
      show: true,
      trigger: 'axis',
    },
    series: [
      {
        data: probabilities,
        type: 'bar',
        barWidth: 7,
        itemStyle: {
          color: '#846bce',
          borderRadius: 4,
        },
      },
    ],
  };
});
</script>

<style scoped lang="less"></style>